<template>
    <tr>
        <!-- <td><input type="checkbox" v-model="bugInfo.resolved" /></td>  不建议修改prop的属性 -->
        <td><input type="checkbox" :checked="bugInfo.resolved" @change="modifyResolved(bugInfo.id)" /></td>
        <td>
            <span class="desc" v-show="!bugInfo.editState" @click="enterEdit(bugInfo)">{{ bugInfo.desc }}</span>
            <input ref="inputDesc" v-show="bugInfo.editState" type="text" :value="bugInfo.desc"
                @blur="updateDesc(bugInfo, $event)" />
        </td>
        <td><button class="small red button" @click="deleteById(bugInfo.id)">删除</button></td>
    </tr>
</template>

<script>


import pubsub from 'pubsub-js'
export default {
    name: 'BugItem',
    props: ['bugInfo'],
    methods: {
        modifyResolved(bugId) {
            // 发布消息
            pubsub.publish('modifyResolvedCallBack', bugId)
        },
        deleteById(bugId) {
            // 发布消息
            pubsub.publish('deleteByIdCallBack', bugId)
        },
        // 进入编辑状态
        enterEdit(bug) {
            if (bug.hasOwnProperty('editState')) {
                bug.editState = true
            } else {
                // 只会执行一次
                this.$set(bug, 'editState', true)
            }


            // Vue为了提高效率，在enterEdit方法执行结束后，才会全部渲染一次

            // 第一种方案：故这里使用延迟任务，来获取焦点
            // setTimeout(() => {
            //     // 获取文本框，并且让文本框获得焦点
            //     this.$refs.inputDesc.focus()
            // },1000)

            // 第二种方案：使用Vue提供好的API就行了
            // 非常重要：$nextTick会绑定一个回调函数，这个回调函数会在下一次dom全部渲染完毕后使用
            this.$nextTick(function () {
                this.$refs.inputDesc.focus()
            })
        },
        // 失去焦点，修改描述信息
        updateDesc(bug, e) {
            // console.log(bugId, e.target.value)

            let newDesc = e.target.value.trim()
            if (!newDesc) return

            // 发布消息
            bug.desc = newDesc
            pubsub.publish('updateDescCallback', bug)

            // 隐藏文本框
            bug.editState = false
        }
    }
}
</script>

<style scoped>
/* item */
table tbody tr:nth-child(odd) {
    background-color: #eee;
}

table tbody tr:hover {
    background-color: #ccc;
}

table tbody tr td:first-child {
    color: #f40;
}

td {
    border: 1px solid #999;
    text-align: center;
    padding: 5px 0;
}

.desc {
    cursor: pointer;
}
</style>